<?php if (!defined('THINK_PATH')) exit();?><!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="renderer" content="webkit">
<title></title>
<link rel="stylesheet" href="<?php echo C('ADMIN_CSS_URL');?>pintuer.css">
<link rel="stylesheet" href="<?php echo C('ADMIN_CSS_URL');?>admin.css">
<script src="<?php echo C('ADMIN_JS_URL');?>jquery.js"></script>
<script src="<?php echo C('ADMIN_JS_URL');?>pintuer.js"></script>
  <style>
    /*图片上传*/
    .containers {
      width: 100%;
      height: 100%;
      overflow: auto;
      clear: both;
    }

    .z_photo {
      padding:0.3rem 0.3rem 0.3rem 0;
    }
    .z_photo img {
      width: 1rem;
      height: 1rem;
    }

    .z_addImg {
      float: left;
      margin-right: 0.2rem;
    }

    .z_file {
      width: 4rem;
      height: -0.5rem;
      background: url(z_add.png) no-repeat;
      background-size: 100% 100%;
      float: left;
      margin-right: 0.2rem;
    }

    .z_file input::-webkit-file-upload-button {
      width: 1rem;
      height: 1rem;
      border: none;
      position: absolute;
      outline: 0;
      opacity: 0;
    }

    .z_file input#file {
      display: block;
      width: auto;
      border: 0;
      vertical-align: middle;
    }
    /*遮罩层*/

    .z_mask {
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, .5);
      position: fixed;
      top: 0;
      left: 0;
      z-index: 999;
      display: none;
    }

    .z_alert {
      width: 3rem;
      height: 2rem;
      border-radius: .2rem;
      background: #fff;
      font-size: .24rem;
      text-align: center;
      position: absolute;
      left: 50%;
      top: 50%;
      margin-left: -1.5rem;
      margin-top: -2rem;
    }

    .z_alert p:nth-child(1) {
      line-height: 1.5rem;
    }

    .z_alert p:nth-child(2) span {
      display: inline-block;
      width: 49%;
      height: .5rem;
      line-height: .5rem;
      float: left;
      border-top: 1px solid #ddd;
    }

    .z_cancel {
      border-right: 1px solid #ddd;
    }

  </style>
</head>
<body>
<div class="panel admin-panel">
  <div class="panel-head" id="add"><strong><span class="icon-pencil-square-o"></span>增加相片</strong></div>
  <div class="body-content">
    <form method="post" class="form-x" action="" enctype="multipart/form-data">
      <div class="form-group">
        <div class="label">
          <label>添加图片：</label>
        </div>
      <div class="field">
          <!--    照片添加    -->
          <input type="file" name="file[]" id="file" value="" accept="image/*" multiple onchange="imgChange('z_photo','z_file');" />
          <div class="z_photo">
              <div class="z_file">

              </div>
          </div>
          <!--遮罩层-->
          <div class="z_mask">
              <!--弹出框-->
              <div class="z_alert">
                  <p>确定要删除这张图片吗？</p>
                  <p>
                      <span class="z_cancel">取消</span>
                      <span class="z_sure">确定</span>
                  </p>
              </div>
          </div>
      </div>
      </div>
      <div class="form-group">
        <div class="label">
          <label></label>
        </div>
        <div class="field">
          <button class="button bg-main icon-check-square-o" type="submit"> 添加</button>
        </div>
      </div>
    </form>
  </div>
</div>
<script type="text/javascript">
  //px转换为rem
  (function(doc, win) {
    var docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function() {
              var clientWidth = docEl.clientWidth;
              if (!clientWidth) return;
              if (clientWidth >= 640) {
                docEl.style.fontSize = '100px';
              } else {
                docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
              }
            };

    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
  })(document, window);

  function imgChange(obj1, obj2) {
    //获取点击的文本框
    var file = document.getElementById("file");
    //存放图片的父级元素
    var imgContainer = document.getElementsByClassName(obj1)[0];
    //获取的图片文件
    var fileList = file.files;
    //文本框的父级元素
    var input = document.getElementsByClassName(obj2)[0];
    var imgArr = [];
    //遍历获取到得图片文件
    for (var i = 0; i < fileList.length; i++) {
      var imgUrl = window.URL.createObjectURL(file.files[i]);
      imgArr.push(imgUrl);
      var img = document.createElement("img");
      img.setAttribute("src", imgArr[i]);
      var imgAdd = document.createElement("div");
      imgAdd.setAttribute("class", "z_addImg");
      imgAdd.appendChild(img);
      imgContainer.appendChild(imgAdd);
    };
    imgRemove();
  };

  function imgRemove() {
    var imgList = document.getElementsByClassName("z_addImg");
    var mask = document.getElementsByClassName("z_mask")[0];
    var cancel = document.getElementsByClassName("z_cancel")[0];
    var sure = document.getElementsByClassName("z_sure")[0];
    for (var j = 0; j < imgList.length; j++) {
      imgList[j].index = j;
      imgList[j].onclick = function() {
        var t = this;
        mask.style.display = "block";
        cancel.onclick = function() {
          mask.style.display = "none";
        };
        sure.onclick = function() {
          mask.style.display = "none";
          t.style.display = "none";
        };

      }
    };
  };

</script>
</body></html>